<template>
	<view class="homePageWrapper wrapperLayer wd100  bdbox" style="padding: 0 20rpx;">
		<view class="userContent rowCen wd100 bdbox" v-if="userInfo.id" style="padding: 0 10rpx;">
			<view class="avatorimg" @tap="goHref('/pages/setting/modifyInfo')">
				<u--image :src="userInfo.avatar" width="108rpx" height="108rpx"></u--image>
			</view>
			<view class="accountInfo">
				<view class="userName row" style="text-align: right;">
					<view>{{userInfo.nickname}}</view>
					<image class="level-icon" :src="userInfo.level_icon"></image>
				</view>
				<view class="rowCen greyTxt">
					<text>ID：{{userInfo.id }}</text>
				</view>
			</view>

			<!-- <view class="cusbox colCen" style="margin-right: 10rpx;box-sizing: border-box;" @click="showKefu">
				<image class="cusImg"
					src="../../static/kefu.png" mode="">
				</image>
				<span>
					在线客服
				</span>
			
				</button>
			</view> -->

		</view>
		<view class="userContent rowCen wd100 bdbox" v-else>
			<view class="accountInfo" @click="goHref('/pages/login/index')">
				<view class="userName rowCen">
					<view>请登录</view>
				</view>
			</view>
		</view>

		<view class="whiteborderContainer colCen wd100">
			<view class="enterBar wd100 rowCenBet bdbox pd30">
				<view class="titletxt">
					我的收益
				</view>
			</view>

			<view class="dbbaseBar wd100 pd20 rowCen bdbox">
				<view class="dbitems colCen">
					<view class="itemval">
						￥{{profitData.toDayPreIncome}}
					</view>
					<view class="itemlabel">
						今日预估
					</view>
				</view>
				<view class="dbitems colCen">
					<view class="itemval">
						￥{{profitData.yesterDayPreIncome}}
					</view>
					<view class="itemlabel">
						昨日预估
					</view>
				</view>
				<view class="dbitems colCen">
					<view class="itemval">
						￥{{profitData.totalIncome}}
					</view>
					<view class="itemlabel">
						累计收益
					</view>
				</view>
			</view>
		</view>

		<view v-if="userInfo.has_coupons" class="certificate">
			<view class="left">
				小游戏挑战奖励
			</view>
			<view class="right">
				百分百返佣券 * 1
			</view>
		</view>

		<view class="whiteborderContainer rowCenBet wd100 bdbox" style="padding: 40rpx 24rpx;">
			<view class="colSta">
				<view class="titletxt">
					账号可提现金额(元)
				</view>
				<view class="valtxt">
					{{userInfo.user_money || 0}}
				</view>
			</view>
			<view class="withdrawLog">
				<view class="rowCen" @click="goHref('/pages/wallet/wallet')">
					查看明细
					<image class="enterIcon" src="/static/gorightBlack.png" mode=""></image>
				</view>
				<view class="cashBtn rowCenCen" @click="goHref('/pages/cashOut/cashOut')">
					提现
				</view>
			</view>

		</view>
		<!-- <view class="whiteborderContainer colCen wd100">
			<view class="enterBar wd100 rowCenBet bdbox pd30">
				<view class="titletxt">
					我的订单
				</view>
				<view class="goenter rowCen" @click="goOrder()">
					查看订单
					<image class="enterIcon" src="/static/gorightBlack.png" mode=""></image>
				</view>
			</view>
		
			<view class="dbbaseBar wd100 pd20 rowCen bdbox">
				<view class="dbitems colCen" @click="goOrder(1)">
					<view class="itemval">
						<u-badge :absolute="true" :offset="[-8,-12]" type="success" max="99" :value="orderNum[0]"></u-badge>
						<image class="itemImg" src="../../static/daishangchuan.png" mode="aspectFit">
						</image>
					</view>
					<view class="itemlabel">
						已报名
					</view>
				</view>
				<view class="dbitems colCen" @click="goOrder(2)">
					<view class="itemval">
						<u-badge :absolute="true" :offset="[-8,-12]" type="success" max="99" :value="orderNum[1]"></u-badge>
						<image class="itemImg" src="../../static/shenhezhong.png" mode="aspectFit"></image>
					</view>
					<view class="itemlabel">
						已下单
					</view>
				</view>
				<view class="dbitems colCen"  @click="goOrder(3)">
					<view class="itemval">
						<image class="itemImg" src="../../static/yiwancheng.png" mode="aspectFit"></image>
					</view>
					<view class="itemlabel">
						已完成
					</view>
				</view>
				<view class="dbitems colCen" @click="goOrder(4)">
					<view class="itemval">
						<image class="itemImg" src="../../static/cuowu.png" mode="aspectFit"></image>
					</view>
					<view class="itemlabel">
						已取消
					</view>
				</view>
			</view>
		</view> -->

		<view class="whiteborderContainer colCen wd100 bdbox">
			<view class="enterBar wd100 rowCen bdbox pd30">
				<view class="titletxt">
					实用工具
				</view>

			</view>
			<view class="menuScrollContainer bdbox wd100 rowCen" style="flex-wrap: wrap;">
				<view class="menuItem colCenCen" v-for="(item,index) in menuList" :key="index"
					@click="goCommonUrl(item)">
					<image class="menuPic" :src="item.image" mode=""></image>
					<view class="menuTxt">{{item.name}}</view>
				</view>
			</view>
		</view>
		<kefuModal ref="kefuModal"></kefuModal>
		<communityModal ref="communityModal"></communityModal>

	</view>
</template>

<script>
	import * as UserApi from '@/api/user'
	import * as MenuApi from '@/api/menu'
	import * as Api from '@/api/bwc'
	import common from '@/utils/util.js'
	import store from '@/store'
	import kefuModal from "@/components/kefuModal.vue"
	import communityModal from "@/components/communityModal.vue"
	import storage from '../../utils/storage';
	export default {
		components: {
			kefuModal,
			communityModal
		},
		data() {
			return {
				orderNum: [0, 0],
				improvelInfoShow: false,
				userId: "",
				userInfo: "",
				menuList: "",
				Ylist: "",
				profitData: {
					toDayPreIncome: "0.00",
					yesterDayPreIncome: "0.00",
					totalIncome: "0.00"
				}
			}
		},
		onLoad() {
			this.userId = store.getters.userId;
			this.loadPage()
		},
		onShow() {
			this.userId = store.getters.userId;
			console.log(this.userId)
			if (this.userId) {
				this.getUserInfo();
				this.getOrderNum();
				this.getEstimatedAmount();
			}
		},
		methods: {
			showKefu() {
				this.$refs.kefuModal.show()
			},
			goOrder(type = '') {
				if (!this.userId) {
					uni.navigateTo({
						url: "/pages/login/index"
					})
				} else {
					uni.switchTab({
						url: "/pages/order/order?type=" + type
					})
				}

			},
			getUserInfo() {
				UserApi.getUserInfo().then((res) => {
					if (res.code == 1) {
						this.userInfo = res.data
					}
				}).catch((e) => {
					//return this.$toast('接口请求错误');
				})
			},
			getEstimatedAmount() {
				UserApi.getEstimatedAmount().then((res) => {
					if (res.code == 1) {
						this.profitData.toDayPreIncome = res.data.today
						this.profitData.yesterDayPreIncome = res.data.yesterday
						this.profitData.totalIncome = res.data.total
					}
				}).catch((e) => {
					//return this.$toast('接口请求错误');
				})
			},
			getOrderNum() {
				Api.getOrderNum().then((res) => {
					if (res.code == 1) {
						this.orderNum = res.data.info
					}
				}).catch((e) => {
					//return this.$toast('接口请求错误');
				})
			},
			loadPage() {
				this.getMenuList()
			},
			getMenuList() {
				MenuApi.getMenuList({
					'position': 2
				}).then((res) => {
					if (res.code == 1) {
						this.menuList = res.data
					}
				}).catch((e) => {
					//return this.$toast('接口请求错误');
				})
			},

			goHref(url) {
				if (this.userId) {
					uni.navigateTo({
						url: url
					})
				} else {
					uni.navigateTo({
						url: "/pages/login/index"
					})
				}

			},

			goCommonUrl(info) {
				if (!this.userId) {
					uni.navigateTo({
						url: "/pages/login/index"
					})
				} else {
					if (info.url_type == 5) {
						this.$refs.communityModal.show(info)
					} else {
						common.goUrl(info, this)
					}
				}
			},

			closemodel() {
				this.updataUser()
				this.improvelInfoShow = false
			},
			upgradation() {
				uni.navigateTo({
					url: '/pages/upgradation/upgradation'
				})
			}
		}
	}
</script>

<style lang="scss">
	.homePageWrapper {
		.userContent {
			.level-icon {
				margin-left: 20rpx;
				width: 134rpx;
				height: 42rpx;
			}

			.avatorimg {
				width: 108rpx;
				height: 108rpx;
				border-radius: 50%;
				overflow: hidden;
			}


			.accountInfo {
				flex: 1;
				margin-left: 24rpx;

				.userName {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;

					.bossTip {
						padding: 0 14rpx;
						line-height: 38rpx;
						background: #A4ABCC;
						border-radius: 10rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						margin-left: 10rpx;
					}
				}

				.greyTxt {
					font-size: 24rpx;
					font-weight: 500;
					color: #666;
					margin-top: 18rpx;
				}
			}

			margin: 35rpx 0;
		}

		.whiteborderContainer {
			background-color: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.enterBar {
				height: 90rpx;

				.goenter {
					font-size: 26rpx;
					font-weight: 500;
					color: #333333;

					.enterIcon {
						width: 10rpx;
						height: 19rpx;
						margin-left: 10rpx;
					}
				}
			}

			.menuScrollContainer {
				//margin-bottom: 30rpx;这有边距啊肯定大啊

				.menuItem {
					width: 25%;
					margin-bottom: 30rpx;

					.menuPic {
						width: 70rpx;
						height: 70rpx;
					}

					.menuTxt {
						margin-top: 20rpx;
						font-size: 26rpx;
						font-weight: 500;
						color: #333333;
					}
				}
			}

			.titletxt {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
			}

			.valtxt {
				font-size: 38rpx;
				font-weight: bold;
				color: #333333;
				margin-top: 30rpx;
			}

			.dbbaseBar {
				margin-top: 10rpx;
				margin-bottom: 30rpx;

				.dbitems {
					flex: 1;
				}

				.itemval {
					position: relative;

					.itemImg {
						width: 64rpx;
						height: 64rpx;
					}

				}

				.itemlabel {
					font-size: 24rpx;
					font-weight: 500;
					color: #666;
				}
			}


		}

		.certificate {
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			width: 100%;
			height: 110rpx;
			background-color: #ff4751;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.left {
				font-size: 28rpx;
				font-weight: bold;
				color: #ffb702;
			}
			.right{
				font-size: 28rpx;
				font-weight: bold;
				color: #ffb702;
			}
		}

		.colListContainer {
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;

			.itemsStyle {
				height: 98rpx;

				.itemIcon {
					width: 30rpx;
					height: 30rpx;
				}

				.itemTitle {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
					margin-left: 20rpx;
				}

				.GrtIcon {
					width: 12rpx;
					height: 20rpx;
				}
			}
		}
	}

	.cusbox {
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;

		.cusImg {
			width: 55rpx;
			height: 55rpx;
		}
	}

	button::after {
		border: none;
	}

	button {
		margin: 0;
		padding: 0;
		border: none;

	}

	.withdrawLog {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;

		.enterIcon {
			width: 10rpx;
			height: 19rpx;
			margin-left: 10rpx;
		}

		.cashBtn {
			width: 140rpx;
			height: 60rpx;
			background: #FFB702;
			border-radius: 30rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
			margin-top: 22rpx;
		}

	}
</style>